<!--suppress ALL -->
<template>

  <div style="width: 1638px">
    <div style="float: left">
    <span>
      <div style="width: 500px">
      <el-button type="primary" icon="el-icon-plus" round size="medium" @click="doAdd"></el-button>
      <el-button type="warning" icon="el-icon-edit" round size="medium" @click="doUpdate"></el-button>
      <el-button type="danger" icon="el-icon-delete" round size="medium" @click="doDelete"></el-button>
      <DialogFormCpt :dialog-visible="showDialog" title="添加菜单" :content="content" :url="menuAddUrl"
                     method="post" @close="closeDialog" @doSubmit="refresh">
        <template>
                <el-form ref="form" :model="content">
                  <el-form-item label="菜单名">
                    <el-input placeholder="请输入菜单名" v-model="content.label"></el-input>
                  </el-form-item>
                  <el-form-item label="菜单编码">
                    <el-input placeholder="请输入菜单编码" v-model="content.code"></el-input>
                  </el-form-item>
                  <el-form-item label="菜单图标">
                    <el-input placeholder="请输入菜单图标" v-model="content.icon"></el-input>
                  </el-form-item>
                  <el-form-item label="路由路径">
                    <el-input placeholder="请输入路由路径" v-model="content.path"></el-input>
                  </el-form-item>
                  <el-form-item label="菜单功能描述">
                    <el-input placeholder="请输入菜单功能描述" v-model="content.detail"></el-input>
                  </el-form-item>
                </el-form>
              </template>
      </DialogFormCpt>

      <DialogFormCpt :dialog-visible="showUpdateDialog" title="修改菜单" :content="content" :url="menuUpdateUrl"
                     method="put" @close="closeUpdateDialog" @doSubmit="refresh">
        <template>
                <el-form ref="form" :model="content">
                  <el-form-item label="菜单名">
                    <el-input placeholder="请输入菜单名" v-model="content.label"></el-input>
                  </el-form-item>
                  <el-form-item label="菜单编码">
                    <el-input placeholder="请输入菜单编码" v-model="content.code"></el-input>
                  </el-form-item>
                  <el-form-item label="菜单图标">
                    <el-input placeholder="请输入菜单图标" v-model="content.icon"></el-input>
                  </el-form-item>
                  <el-form-item label="路由路径">
                    <el-input placeholder="请输入路由路径" v-model="content.path"></el-input>
                  </el-form-item>
                  <el-form-item label="菜单功能描述">
                    <el-input placeholder="请输入菜单功能描述" v-model="content.detail"></el-input>
                  </el-form-item>
                </el-form>
              </template>
      </DialogFormCpt>

      <DialogFormCpt :dialog-visible="showDeleteDialog" title="确认删除"
                     :url="menuDeleteUrl + '?type=1&ids='+ this.selected"
                     method="delete" @close="closeDeleteDialog" @doSubmit="refresh">
      </DialogFormCpt>

      <el-tree
        :data="tree"
        @node-click="handleNodeClick"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        getCheckedKeys="getCheckedKeys(t)"
        highlight-current
        @check="check"
        style="border: 2px">
      </el-tree>
    </div>
    </span>
    </div>
  </div>

</template>

<script>
  import {url} from '../../../common/Common.js'
  import {get, getSingle} from '../../../components/HttpUtil'
  import ButtonCpt from '../../../components/ButtonCpt'
  import DialogFormCpt from '../../../components/DialogFormCpt'

  export default {
    name: 'UaaMenuPage',
    components: {ButtonCpt, DialogFormCpt},
    data () {
      return {
        menuAddUrl: url.uaa.menu.add,
        menuUpdateUrl: url.uaa.menu.update,
        menuTreeUrl: url.uaa.menu.tree,
        postUrl: url.uaa.menu.add,
        menuDeleteUrl: url.uaa.menu.delete,

        showDialog: false,
        showUpdateDialog: false,
        showDeleteDialog: false,

        content: {
          id: '',
          label: '',
          code: '',
          icon: '',
          path: '',
          detail: '',
          isRoot: true,
          parentId: 0,
        },

        currentNode: 0,
        tree: [],
        selected: [],
      }
    },

    methods: {
      doAdd () {
        this.showDialog = !this.showDialog
        this.content.parentId = this.currentNode
        if (this.currentNode == 0) {
          this.content.isRoot = true
        } else {
          this.content.isRoot = false
        }
      },
      doUpdate(){
        this.content.parentId = this.currentNode
        if (this.currentNode == 0) {
          this.$message({
            showClose: true,
            message: '未选中',
            type: 'warning'
          })
        } else {
          this.showUpdateDialog = !this.showUpdateDialog
          getSingle(this.menuAddUrl + '/' + this.currentNode, this.$store.state.token)
            .then(res => {
              this.content = res.data
            })
            .catch(e => {
              console.log(e)
            })
        }
      },
      doDelete () {
        if (this.selected.length == 0) {
          this.$message({
            showClose: true,
            message: '未选中',
            type: 'warning'
          })
        }
        else {
          this.showDeleteDialog = !this.showDeleteDialog
        }

      },
      closeDialog () {
        this.showDialog = !this.showDialog
      },
      closeDeleteDialog () {
        this.showDeleteDialog = !this.showDeleteDialog
      },
      closeUpdateDialog(){
        this.showUpdateDialog = !this.showUpdateDialog
      },
      refresh: function () {
        var url = this.menuTreeUrl
        get(url, this.$store.state.token)
          .then(res => {

            this.$nextTick(function () {
              this.tree = res.data

            })

          })
          .catch(e => {
            console.log(e)
          })
      },
      check (val) {
        this.$nextTick(() => {
          this.selected = this.$refs.tree.getCheckedKeys()
        })
      },
      handleNodeClick (val) {
        this.currentNode = val.id
      }

    },

    created: function () {
      this.refresh()
    },

    watch: {
      tree: function (newQuestion, oldQuestion) {
        this.tree = newQuestion
      }
    }

  }


</script>

<style>

</style>

